<template>
  <div id="page_db">
    <div id="db">
      <div id="db_Tit">
        <span class="tit"><i class="el-icon-edit-outline"/>配置db
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
          >
            <vue-editor
              v-model="helpArrays.CONFIG_BASIC"
              :disabled="true"
              :editor-toolbar="customToolbar"
            />
            <i slot="reference" class="el-icon-question" style="color:#409eff;margin-left:5px;font-size:20px;"/>
          </el-popover>
        </span>

      </div>
      <el-form
        ref="form"
        :model="form"
        label-width="180px"
      >
        <el-form-item
          ref="dbUrl"
          label="连接地址"
        >
          <el-input v-model="list.dbUrl"/>
          <span
            v-show="tit.dbUrl"
            class="errortitle"
          >地址不能为空</span>
        </el-form-item>
        <el-form-item
          ref="dbUser"
          label="用户名"
        >
          <el-input v-model="list.dbUser"/>
          <span
            v-show="tit.dbUser"
            class="errortitle"
          >用户名不能为空</span>

        </el-form-item>
        <el-form-item
          ref="dbPass"
          label="密码"
        >
          <el-input v-model="list.dbPassword"/>
          <span
            v-show="tit.dbPass"
            class="errortitle"
          >密码不能为空</span>

        </el-form-item>
        <el-form-item label="列名称映射规则">
          <el-select v-model="list.columnNamedRule">
            <el-option
              v-for="(item,key,index) in rule.namedMappers"
              :key="index"
              :label="item"
              :value="key"
            />
          </el-select>

        </el-form-item>
        <el-form-item label="表名称映射规则">
          <!-- {{list}} -->
          <el-select v-model="list.tableNamedRule">
            <el-option
              v-for="(item,key,index) in rule.namedMappers"
              :key="index"
              :label="item"
              :value="key"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="方言">
          <el-select v-model="list.dbDialect">
            <el-option
              v-for="(item,key,index) in rule.dialects"
              :key="index"
              :label="item"
              :value="key"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button
          class="next"
          @click="onSubmit"
        >下一步</el-button>
        <el-button
          class="back"
          @click="onBack"
        >取消</el-button>
      </div>
    </div>

  </div>
</template>
<style>
#page_db #db {
  margin-left: 15px;
  margin-top: 15px;
  width: 100%;
  border: 1px solid #623f18;
}
#page_db #db #db_Tit {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #623f18;
}
#page_db #db #db_Tit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #623f18;
  line-height: 40px;
  float:left;
}
#page_db #db #db_Tit .tit i {
  margin-right: 10px;
}
#page_db #db .btn {
  text-align: center;
  border-top: 1px solid #e5e5e5;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #f5f5f5;
}
#page_db #db .btn .el-button {
  margin-right: 30px;
}
#page_db .el-form {
  margin: 90px 150px;
  margin-bottom: 20px;
}
#page_db .el-input {
  width: 350px;
}
#page_db .el-input__suffix {
  top: 1px;
}
#page_db .el-form-item__content {
  width: 100%;
}
#page_db .errortitle {
  color: red;
}
#page_db .next {
  background: #623f18;
  color: #fff;
}
#page_db .back {
  border-color: #623f18;
  color: #623f18;
}
</style>
<script>
import { basicSave, docwindow, gconfigBasic } from '@/api/page'
import { VueEditor } from 'vue2-editor'
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      arr: [],
      customToolbar: [],
      helpArrays: [],
      tit: {
        dbUrl: false,
        dbUser: false,
        dbPass: false
      },
      list: [
        {
          columnNamedRule: 'UNDERLINE_SEPARATE'
        }
      ],
      option: [],
      rule: [],
      save: {
        id: '',
        pid: '',
        dbDialect: '',
        dbUrl: '',
        dbUser: '',
        dbPassword: '',
        tableNamedRule: '',
        columnNamedRule: ''
      },
      loading: '',
      data: {
        pid: ''
      },
      form: {}
    }
  },
  mounted() {
    this.data.pid = this.$route.query.pid
    localStorage.setItem('pid', '')
    // console.log(this.data)

    if (this.data.pid == null) {
      this.$router.push('/admin')
    }
    gconfigBasic(this.data)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.list = response.data.data.config
          this.rule = response.data.data
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
        this.$router.push('/admin')
      })

    this.arr = ['CONFIG_BASIC']

    docwindow(this.arr)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.helpArrays = response.data.data
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
      })
  },
  methods: {
    onSubmit() {
      this.save.id = ''
      this.save.pid = this.data.pid
      this.save.dbDialect = this.list.dbDialect || ''
      this.save.dbUrl = this.list.dbUrl || ''
      this.save.dbUser = this.list.dbUser || ''
      this.save.dbPassword = this.list.dbPassword || ''
      this.save.tableNamedRule = this.list.tableNamedRule || ''
      this.save.columnNamedRule = this.list.columnNamedRule || ''

      if (this.save.dbUrl == '') {
        this.$refs.dbUrl.$el.childNodes[0].style.color = 'red'
        this.$refs.dbUrl.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.dbUrl = true
      } else {
        this.$refs.dbUrl.$el.childNodes[0].style.color = '#606266'
        this.$refs.dbUrl.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.dbUrl = false
      }
      if (this.save.dbUser == '') {
        this.$refs.dbUser.$el.childNodes[0].style.color = 'red'
        this.$refs.dbUser.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.dbUser = true
      } else {
        this.$refs.dbUser.$el.childNodes[0].style.color = '#606266'
        this.$refs.dbUser.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.dbUser = false
      }
      if (this.save.dbPassword == '') {
        this.$refs.dbPass.$el.childNodes[0].style.color = 'red'
        this.$refs.dbPass.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.dbPass = true
      } else {
        this.$refs.dbPass.$el.childNodes[0].style.color = '#606266'
        this.$refs.dbPass.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.dbPass = false
      }

      if (!this.tit.dbUrl && !this.tit.dbUser && !this.tit.dbPass) {
        basicSave(this.save)
          .then(response => {
            if (response.data.code == 'SUCCESS') {
              this.openFullScreen()
              setTimeout(() => {
                this.loading.close()
                this.$router.push('/admin/pageModel')
                localStorage.setItem('pid', this.data.pid)
              }, 1000)
            } else {
              alert(response.data.message)
            }
          })
          .catch(error => {
            alert(error.response.data.message)
          })
      }
    },
    onBack() {
      this.$router.go(-1)
      localStorage.setItem('pid', this.data.pid)
    },
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
  }
}
</script>
